<template>
    <div>
        <transition name="fade">
            <div class="style-3" v-if="templateStyle ==='style-3'">
                <div class="course_common_box">
                    <div class="course-content">
                        <div class="course-content-left">
                            <div class="content-left-img">
                                <loadingImage :src="addPrefixHost(contentInfo.image)"/>
                            </div>
                        </div>
                        <div class="course-content-right">
                            <div class="content-right-gap"
                                 v-html="getHtml(contentInfo.sentence&&contentInfo.sentence.chinese)"
                                 @click="setOption($event)">
                            </div>
                            <div class="content-right-sentence">
                                <p>
                                    {{contentInfo.sentence ? contentInfo.sentence.english : ''}}
                                </p>
                            </div>
                            <ul class="content-right-word">
                                <li v-for="(item,index) in option" @click="getOption(item,index)">
                                    <div class="inside" :class="activeIndex===index&&'active'">
                                        <div class="tb">
                                            <!--<span class="py">{{item.pinyin}}</span>-->
                                            <span class="cn">{{item.chinese}}</span>
                                            <span class="en">{{item.english}}</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="fade">
            <div class="style-4" v-if="templateStyle ==='style-4'">
                <div class="course_common_box">
                    <div class="course-content">
                        <div class="course-content-left">
                            <div class="content-left-img">
                                <loadingImage :src="addPrefixHost(contentInfo.image)"/>
                            </div>
                        </div>
                        <div class="course-content-right">
                            <div class="box">
                                <div class="content-right-sentence">
                                    {{contentInfo.sentence ? contentInfo.sentence.english : ''}}
                                </div>
                                <div class="content-right-gap"
                                     v-html="getHtml(contentInfo.sentence&&contentInfo.sentence.chinese)"
                                     @click="setOption($event)">
                                </div>
                            </div>
                            <ul class="content-right-word">
                                <li v-for="(item,index) in option" @click="getOption(item,index)"
                                    :class="activeIndex===index&&'active'">
                                    <div class="inside">
                                        <div class="tb">
                                            <!--<span class="en">{{item.pinyin}}</span>-->
                                            <span class="cn">{{item.chinese}}</span>
                                            <span class="en">{{item.english}}</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';
    import loadingImage from '~/components/loadingImage';
    import R from 'ramda';
    import Vue from 'vue';

    export default {
        async fetch({store, params, isServer, redirect}) {
            (isServer || !params) && redirect("/learner/myCourse");
            params.extendData || await store.dispatch("index/course/index/setContentInfo", params);
        },
        asyncData({params}) {
            return {extendData: params.extendData}
        }, data() {
            return {
                answerArr: [],
                activeIndex: null,
                activeItem: null,
                toIndex: null,
                isUpdate: false,
                correctArr: [],
                errorMessage: ""
            }
        },
        methods: {
            ...mapActions('index/course/index', [
                'setAnswer'
            ]),
            getHtml(item) {
                let obj = item;
                if (obj) {
                    const re = /([^\[\]]+)(?=\])/g;
                    let arr = obj.match(re);
                    if (arr) {
                        for (let i = 0; i < arr.length; i++) {
                            if (arr[i] % arr[i] === 0) {
                                let key = this.answerArr[arr[i] - 1] || '';
                                obj = obj.replace(/\[[0-9]*]、?/, "<div class='gap' data-name='" + (arr[i] - 1) + "'>" + (key.chinese || '') + "</div>");
                            }
                        }
                    }
                    return obj;
                }
            },
            setOption(e) {
                if (e.target.nodeName.toUpperCase() === "DIV" && e.target.className === "gap") {
                    let target = e.target;
                    this.toIndex = target.getAttribute("data-name");
                    if (this.activeItem != null) {
                        if (!this.answerArr[this.toIndex]) {
                            Vue.set(this.answerArr, this.toIndex, this.activeItem);
                            this.option.splice(this.activeIndex, 1);
                            this.activeItem = null;
                            this.activeIndex = null;
                        } else {
                            this.option.splice(this.activeIndex, 1);
                            this.option.push(this.answerArr[this.toIndex]);
                            Vue.set(this.answerArr, this.toIndex, this.activeItem);
                            this.activeItem = null;
                            this.activeIndex = null;
                        }
                    } else {
                        if (this.answerArr[this.toIndex]) {
                            this.option.push(this.answerArr[this.toIndex]);
                        }
                        Vue.set(this.answerArr, this.toIndex, "");
                    }
                    this.Answer(this.toIndex);
                }
            },
            getOption(item, index) {
                this.activeIndex = index;
                this.activeItem = item;
            },
            Answer(Index) {
                let answer = false;
                Vue.set(this.correctArr, Index, this.answerArr[Index].order);
                for (let i = 0; i < this.contentInfo.answerOrder.length; i++) {
                    if (this.correctArr.toString() === this.contentInfo.answerOrder[i].toString()) {
                        answer = true;
                    }
                }
                this.setAnswer({
                    answer: answer,
                    msg: this.errorMessage
                });
            },
            init() {
                this.$nextTick(_ => {
                        if (this.contentInfo.answerOrder) {
                            for (let i = 0; i < this.contentInfo.answerOrder.length; i++) {
                                const orderArr = this.contentInfo.answerOrder[i] && this.contentInfo.answerOrder[i].split(",");
                                if (orderArr) {
                                    for (let j = 0; j < orderArr.length; j++) {
                                        Vue.set(this.correctArr, j, "");
                                        if (this.contentInfo.words) {
                                            for (let k = 0; k < this.contentInfo.words.length; k++) {
                                                if (this.contentInfo.words[k].order === orderArr[j]) {
                                                    this.errorMessage += (j + 1) + "." + this.contentInfo.words[k].chinese + "<br>";
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        this.setAnswer({
                            answer: false,
                            msg: this.errorMessage
                        });
                    }
                )
            }
        }
        ,
        created() {
        },
        mounted() {
            this.init();
        },
        watch: {
            contentInfo() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                const initData = {
                    answerArr: [],
                    activeIndex: null,
                    activeItem: null,
                    toIndex: null,
                    isUpdate: false,
                    correctArr: [],
                    errorMessage: ""
                };
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600);
                this.init();
            }
            ,
        }
        ,
        computed: {
            option() {
                const content = [];
                if (this.content.words) {
                    for (let i = 0; i < this.content.words.length; i++) {
                        content.push(this.content.words[i]);
                    }
                }
                return content.sort(function () {
                    return Math.random() - 0.5
                });
            }
            ,
            contentInfo() {
                return this.courseExtendInfo || this.extendData || this.contentData;
            }
            ,
            ...
                mapState('index/course/index', {
                    courseExtendInfo: state => state.courseExtendInfo,
                    contentData: state => state.contentInfo.content,
                    templateStyle: state => state.templateStyle,
                    pinyinSwitch: state => state.pinyinSwitch,
                    data: state => state.contentInfo,
                    content: state => state.contentInfo ? state.contentInfo.content : {},
                }),
        }
        ,
        components: {
            loadingImage,
        }
    }
</script>
<style lang="less">
    .style-3 {
        .gap {
            display: inline-block;
            margin: 5px .03rem;
            width: 1.2rem;
            height: 42px;
            line-height: 42px;
            font-size: .22rem;
            color: #fff;
            cursor: pointer;
            padding: 0 .03rem;
            background: #681515;
            border-left: .02rem solid #901d1c;
            border-bottom: .02rem solid #901d1c;
            box-shadow: inset -0.03rem 0.01rem 0.05rem #000;
            box-sizing: border-box;
            text-align: center;
            vertical-align: bottom;
        }
    }

    .style-4 {
        .gap {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: inline-block;
            min-width: 1.1rem;
            height: 0.42rem;
            line-height: 0.42rem;
            border-radius: 0.05rem;
            background: -o-linear-gradient(45deg, #6944B5, #353C8D);
            background: linear-gradient(-315deg, #6944B5, #353C8D);
            font-size: 0.22rem;
            color: white;
            cursor: pointer;
            /* box-shadow: 0px 0px 4px 2px white; */
            -webkit-box-shadow: 0 0 0rem 0.01rem white, -0.05rem 0.05rem 0.15rem black inset;
            box-shadow: 0 0 0rem 0.01rem white, -0.05rem 0.05rem 0.15rem black inset;
            vertical-align: bottom;
            /* display: grid; */
            padding: 0 0.05rem;
            margin: 3px;
            text-align: center;
        }
    }
</style>
<style lang="less" scoped>
    .style-3 {

        .course_common_box {
            text-align: center;

            .course-content {
                display: inline-block;
            }

            .course-content-right {
                min-width: 3.9rem;
                max-width: 6rem;
            }

            .course-content-left, .course-content-right {
                display: inline-block;
                vertical-align: middle;
                margin: 0 10px 0 10px;
            }

            .content-left-img {
                width: 2.7rem;
                height: 2.8rem;
                overflow: hidden;
                background: url("~~assets/img/main_content/course/l3-picture-frame.png") center no-repeat;
                background-size: 100% 100%;
                img {
                    width: 85%;
                    height: 81%;
                    margin: 26px 0 0 6px;
                }
            }

            .content-right-gap {
                font-size: .22rem;
                display: inline-block;
                text-align: left;
                vertical-align: middle;

            }
            .content-right-sentence {
                font-size: 25px;
                margin-top: 1rem;
                padding-bottom: 10px;
                box-sizing: border-box;
                text-align: center;
                width: 6.1rem;
                p {
                    text-align: left;
                    vertical-align: middle;
                    display: inline-block;
                }
            }

            .content-right-word {
                margin-top: 25px;
                text-align: center;
                min-height: 64px;

                li {
                    display: inline-block;
                    min-width: 1.4rem;
                    padding: 0.03rem;
                    box-sizing: border-box;
                    background: #BE2C23;
                    font-size: 22px;
                    color: white;
                    background: linear-gradient(#B43C0B 0, #901D1C 90%);
                    margin: 5px;
                    cursor: pointer;
                    .inside {
                        display: table;
                        width: 100%;
                        min-height: .44rem;
                        border: 0.01rem solid #FB984B;
                        box-sizing: border-box;
                        padding: 0 .02rem;
                        &.active {
                            background: linear-gradient(#901D1C 0, #D9151B 90%);
                        }
                        .py, .en {
                            font-size: 12px;
                        }
                        span {
                            display: block;
                        }
                    }

                }
            }

        }

    }

    .style-4 {

        .course_common_box {
            text-align: center;

            .course-content {
                display: inline-block;
            }

            .course-content-right {
                width: 5.15rem;
                .box {
                    border: 0.01rem solid black;
                    border-radius: 0.1rem;
                    background: #b3aaf0;
                    padding: 0.1rem;
                    min-height: 1.5rem;
                    text-align: left;
                    display: grid;
                }
            }

            .course-content-left, .course-content-right {
                display: inline-block;
                vertical-align: middle;
                margin: 0 20px 0 20px;
            }

            .content-left-img {

                border-radius: 5px;
                border: 2px solid black;
                overflow: hidden;
                img {
                    max-width: 2.7rem;
                    max-height: 2rem;
                }
            }

            .content-right-gap {
                display: block;
                font-size: 0.2rem;
            }
            .content-right-sentence {
                font-size: 25px;
                box-sizing: border-box;
            }

            .content-right-word {
                margin-top: 25px;
                text-align: center;
                display: flow-root;
                min-height: 60px;

                li {
                    min-width: 1.5rem;
                    height: 45px;
                    padding: 0 3px;
                    box-sizing: border-box;
                    color: white;
                    background: linear-gradient(#1D1E33 0, #2F4678 90%);
                    margin: 5px;
                    cursor: pointer;
                    box-shadow: 0px 3px 3px black;
                    border-radius: 5px;
                    display: inline-block;
                    .inside {
                        display: table;
                        width: 100%;
                        height: 100%;
                    }
                    &.active {
                        background: linear-gradient(#4A236D 0, #4D24E8 90%);
                    }
                    .en {
                        font-size: 14px;

                    }
                    .cn {
                        font-size: 0.22rem;
                    }

                }
                li:hover {
                    background: linear-gradient(#4A236D 0, #4D24E8 90%);
                }
            }

        }

    }
</style>
